<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>04-JSX规则</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://static.web.sdo.com/chuanshi/common/react.development.js"></script>
	<script src="http://static.web.sdo.com/chuanshi/common/react-dom.development.js"></script>
	<script src="http://static.web.sdo.com/chuanshi/common/babel.min.js"></script>
</head>

<body>
    <div id="app"></div>
</body>

</html>
<script type="text/babel">
    const list=[
		{id:1,name:'cowen'},
		{id:2,name:'tom'},
		{id:3,name:'james'},
		{id:4,name:'carry'}
	]
	const App=(
		<div className="container">
			<ul className="mt-4 list-group">
			  {
			  	list.map(item=>(<li key={item.id} className="list-group-item">{item.name}</li>))
			  }
			</ul>
		</div>
	)
	ReactDOM.render(App,document.getElementById('app'))
</script>